<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性球</title>
    <style>
        .shake{
            width: 80px;
            height: 80px;
            background-color: aqua;
            border-radius: 50%;
            text-align: center;
            margin: 100px auto;
            cursor: pointer;
            color: #fff;
            line-height: 80px;
            font-size: 40px;
        }
        .shake:hover{
            animation: shake 0.25s;
            background-color: yellow;
            transition: all 0.25s;
        }
        @keyframes shake{
            0%,10%,55%,90%,94%,98%,100%{
                transform: scale(1,1);
            }
            30%{
                transform: scale(1.3,0.6);
            }
            75%{
                transform: scale(1.5,1.2);
            }
            92%{
                transform: scale(0.9,0.96);
            }
            96%{
                transform: scale(0.8,1);
            }
            99%{
                transform: scale(1.5,0.7);
            }
        }

        .search{
            width: 80px;
            height: 40px;
            border: 2px solid aqua;
            border-radius: 20px;
            outline: none;
            padding: 0;
            color: #666;
            text-indent: 1em;
            position: absolute;
            right: 500px;
            transition: width 0.5s;
        }
        .search:focus{
            width: 300px;
        }


        .wap{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 2px solid limegreen;
            background-color: mediumturquoise;
            color: #fff;
            font-size: 30px;
            cursor: pointer;
            text-align: center;
            line-height: 100px;
            position: absolute;
            top: calc(50% + 150px);
            left: calc(50% - 50px);
        }
        .wap:hover .roun{
            transform: rotate(1);
            opacity: 1;
            animation: rotate 6s 1.2s linear infinite alternate ;
        }
        @keyframes rotate{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        .roun{
            width: 240px;
            height: 240px;
            border: 2px solid limegreen;
            border-radius: 50%;
            position: absolute;
            top: calc(50% - 120px);
            left: calc(50% - 120px);
            transition: all 1s;
            opacity: 0;
            transform: rotate(0.35);
        }
        .roun span{
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 2px solid limegreen;
            background-color: mediumturquoise;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            line-height: 40px;
            position: absolute;
        }
        .roun span:nth-of-type(1){
            left: -22px;
            top: 50%;
            margin-top: -22px;
        }
        .roun span:nth-of-type(2){
            right: -22px;
            top: 50%;
            margin-top: -22px;
        }
        .roun span:nth-of-type(3){
            top: -22px;
            left: 50%;
            margin-left: -22px;
        }
        .roun span:nth-of-type(4){
            bottom: -22px;
            left: 50%;
            margin-left: -22px;
        }




        .tai{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 1px solid black;
        }
        .lt{
            width: 200px;
            height: 400px;
            
        }
    </style>
</head>
<body>
    <div class="shake">弹</div>
    <input class="search" type="text" placeholder="搜索...">
    <div class="wap">
        阴阳
        <div class="roun">
            <span>天</span>
            <span>干</span>
            <span>地</span>
            <span>支</span>
        </div>
    </div>
    <div class="tai">
        <div class="lt"></div>
        <div class="rt"></div>
    </div>
</body>
</html>